<template>
  <div>
    <header-toobar>
      <a-button style="margin-left: 6px;" size="small" v-func:OPPERIOD0007  type="primary" icon="plus" @click="() =>{this.initData()}">初始化
      </a-button>
      <a-button style="margin-left: 6px;" size="small"  type="primary" icon="plus" @click="() =>{this.addRow()}">新增一条
      </a-button>
      <a-button style="margin-left: 6px;" size="small" v-func:OPPERIOD0002  type="primary" icon="plus" @click="() =>{this.save()}">保存
      </a-button>
      <a-button style="margin-left: 6px;" size="small" v-func:OPPERIOD0006  type="primary" icon="plus" @click="() =>{this.clearAll()}">清除
      </a-button>
    </header-toobar>
    <zh-row :span="24" :gutter="[16,16]">
        <zh-col>
        <zh-card title="查询条件">
        <zh-form ref="queryFrom" :model="queryParam" :rules="rules">
            <zh-input prop="periodYear" type="number" label="所属年度"  v-model="queryParam.periodYear"></zh-input>
            <zh-input prop="operating" type="select" v-model="queryParam.operating" label="操作期规则"
                :options="dictData.operating"></zh-input>
            <template v-if="advanced">
                <zh-input prop="ym" type="number" label="业务年月"  v-model="queryParam.ym"></zh-input>
            </template>
          <zh-form-query v-model="advanced" @queryClick="findListBtn"></zh-form-query>
        </zh-form>
        </zh-card>
      </zh-col>
      <zh-col>
        <zh-table :shadow="true" type="default" ref="periodListTable" title="用户列表" row-id="rowId" :url="tableUrl" :columns="tableColumn"
            :disabled="false" :edit-config="{trigger: 'click', mode: 'row'}">
          <template #operating_edit="{ row }">
            <zh-input :inputStyle="'width: 150px'" type="select" :formflag="false" v-model="row.operating" @change="(val,option)=>onOperatingChange(val,option,row)"
                :options="dictData.operating"></zh-input>
          </template>
          <template #operating_default="{ row }">
            {{row.operatingName}}
          </template>
          <template #begTime_edit="{ row }">
            <zh-input type="date" :formflag="false" showTime v-model="row.begTime" format="YYYY-MM-DD HH:mm:ss"></zh-input>
          </template>
          <template #begTime_default="{ row }">
            {{row.begTime}}
          </template>
          <template #endTime_edit="{ row }">
            <zh-input type="date" :formflag="false" showTime v-model="row.endTime" format="YYYY-MM-DD  HH:mm:ss"></zh-input>
          </template>
          <template #endTime_default="{ row }">
            {{row.endTime}}
          </template>
          
          <template #operate="{ row }">
            <a-tooltip placement="top" v-func:OPPERIOD0005 title="删除">
              <a-icon style="padding-right:15px;color: #00BFFF;cursor: pointer;" type="delete"
                @click="deleteRow(row)"></a-icon>
            </a-tooltip>
          </template>
        </zh-table>
      </zh-col>
    </zh-row>
  </div>
</template>
<script>
import {
  getBatchDict,getOperationList,saveOperation,delOperation,clearAllOperation,initOperation
} from "@/services/system/api"
import HeaderToobar from '@/components/HeaderToobar'
import modal from 'ant-design-vue/es/modal'
import moment from 'moment'
export default {
  name: 'PeriodManager',
  components: {
    HeaderToobar
  },
  data() {
    return {
      description: '业务期管理',
      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      queryParam: {periodYear:undefined,operating:undefined,ym:undefined},
      initRow:{periodId:undefined,periodYear:undefined,operating:undefined,ym:undefined,begTime:undefined,endTime:undefined,orgId:undefined,areaCode:undefined,clientId:undefined,periodSameId:undefined,remarks:undefined},
      dictData:{},
      tableUrl:getOperationList,
      tableColumn: [
        {type: 'seq', width: 60, fixed: 'left', align: 'center', title: '序号'},
        {field: 'periodId', title: 'ID', align: 'center',  visible: false, width: 150},
        {field: 'operating', title: '操作期规则',fixed: 'left', align: 'center', width: 200, editRender: {},slots: {
            // 使用插槽模板渲染
            default: 'operating_default',
            edit:'operating_edit',
        }},
        {field: 'periodYear', title: '所属年度',fixed: 'left', align: 'center', width: 100, editRender: { name: 'AInputNumber'}},
        {field: 'ym', title: '业务年月',fixed: 'left', align: 'center', editRender: {}, width: 150, editRender: { name: 'AInputNumber'}},
        {field: 'begTime', title: '开始时间', align: 'center', editRender: {}, width: 200,slots: {
            // 使用插槽模板渲染
            default: 'begTime_default',
            edit:'begTime_edit',
        }},
        {field: 'endTime', title: '结束时间', align: 'center', editRender: {}, width: 200,slots: {
            // 使用插槽模板渲染
            default: 'endTime_default',
            edit:'endTime_edit',
        }},
        {field: 'orgId', title: '单位id', align: 'center',  visible: false, width: 150},
        {field: 'areaCode', title: '统筹区', align: 'center',  visible: false, width: 150},
        {field: 'clientId', title: '应用id', align: 'center',  visible: false, width: 150},
        {field: 'periodSameId', title: '所属期id', align: 'center',  visible: false, width: 150},
        {field: 'remarks', title: '备注', align: 'center', showOverflow: true, width: 250, editRender: { name: 'AInput' }},
        {field: 'operate', title: '操作', align: 'center', width: 150, fixed: 'right', slots: { default: 'operate' } },
      ],
      rules: {
        periodYear:[
          { required: true, message: '请输入所属年度' }
        ],
        operating:[
          { required: true, message: '请输入操作期规则', whitespace: true }
        ],
      },
    }
  },
  created() {
    // 数据初始化
    // 数据字典初始化
    const params = {}
    params.dictFields = 'operating'
    this.$http.post(getBatchDict, params).then(res => {
      this.dictData = res.result
    })
  },
  methods: {
    moment,
    onOperatingChange(event,options,row){
      let operatingName=""
      options.forEach(item => {
          if(event===item.dictKey){
              operatingName=item.dictValue
          }
      })
      row.operatingName=operatingName
    },
    editRow(row){

    },
    save(){
        let params = {}
        let list= this.$refs.periodListTable.getTableData().tableData
        params.list  = list
        this.$http.post(saveOperation, params).then(res => {
            this.refreshList()
        })
    },
    clearAll(){
        this.$refs.queryFrom.validate(valid => {
            if(valid){
                const params = {}
                params.periodYear=this.queryParam.periodYear
                params.operating=this.queryParam.operating
                this.$http.post(clearAllOperation, params).then((res) => {
                  this.refreshList()
                  modal.info({ title: '成功提示', content: '清除成功' })

                }).catch(() => {
                })
            }
        });
    },
    initData(){
        this.$refs.queryFrom.validate(valid => {
            if(valid){
                const params = {}
                params.periodYear=this.queryParam.periodYear
                params.operating=this.queryParam.operating
                this.$http.post(initOperation, params).then((res) => {
                  this.$refs.periodListTable.setData(res.result)
                  modal.info({ title: '成功提示', content: '初始化成功，请修改后点击保存' })

                }).catch(() => {
                })
            }
        });
    },
    addRow(){
        let row=this.$refs.periodListTable.getCurrentRecord()
        
        this.$refs.periodListTable.insertAt(this.initRow,row)
        
    },
    deleteRow(row){
        const params = {}
        params.periodId = row.periodId
        if(params.periodId){
            this.$http.post(delOperation, params).then(() => {
                modal.info({ title: '成功提示', content: '删除成功' })
                this.$refs.periodListTable.remove(row)
                this.$refs.periodListTable.clearCurrentRow()
            }).catch(() => {
            })
        }else{
            this.$refs.periodListTable.remove(row)
        }
        
    },
    findListBtn(){
      this.findList()
    },
    findList() {
        this.$refs.queryFrom.validate(valid => {
            if(valid){
                this.$refs.periodListTable.query(this.queryParam)
            }
        });
     
    },
    refreshList() {
      this.$refs.periodListTable.refresh(this.queryParam)
    },
  }
}
</script>